<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <!-- 工具栏 -->
        <page-tools>
          <template #after>
            <el-button icon="el-icon-edit" type="success" size="small" @click="addMenu">添加菜单</el-button>
          </template>
        </page-tools>
        <!-- 表格 -->
        <el-table
          :data="list"
          style="width: 100%"
          row-key="id"
          lazy
          default-expand-all
          :tree-props="{children: 'childs',hasChildren: 'points'}"
        >
          <el-table-column prop="title" label="标题" width="250">
            <template #default="scoped">
              <i
                v-if="!scoped.row.pid && scoped.row.childs"
                class="el-icon-folder-opened table-expand"
              />
              <i
                v-else-if="scoped.row.pid && scoped.row.childs"
                class="el-icon-folder table-expand"
              />
              <i v-else class="el-icon-view table-expand"/>
              <span>{{ scoped.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="权限点代码"/>
          <el-table-column label="操作" width="150">
            <template #default="infos">
              <el-button
                icon="el-icon-edit"
                type="primary"
                class="is-plain"
                size="small"
                circle
                @click="editMenu(infos.row.id)"
              />
              <el-button
                icon="el-icon-delete"
                type="danger"
                class="is-plain"
                size="small"
                circle
                @click="delMenu(infos.row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <operat-menu ref="editMenuRef" :show-dialog.sync="showDialog" @addSuccess="getMenusList()"/>
  </div>
</template>

<script>
import { getMenusList, delMenu } from '@/api/menus'
import OperatMenu from './components/operat-menu'
export default {
  name: 'Dashboard',
  components: {
    OperatMenu
  },
  data() {
    return {
      list: [],
      showDialog: false
    }
  },
  created() {
    this.getMenusList()
  },
  methods: {
    // 获取菜单列表
    async getMenusList() {
      try {
        const { data } = await getMenusList()
        this.list = JSON.parse(JSON.stringify(data).replace(/points/g, 'childs'))
      } catch (err) {
        this.$message.error('获取错误')
      }
    },
    // 点击添加按钮
    addMenu() {
      this.showDialog = true
      this.$refs.editMenuRef.getMenusList()
    },
    // 修改
    async editMenu(id) {
      const res = await this.$refs.editMenuRef.getMenuById(id)
      if (res) {
        this.$refs.editMenuRef.getMenusList()
      }
      this.showDialog = true
    },
    // 删除
    delMenu(id) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delMenu(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getMenusList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-expand {
  margin-right: 8px;
}
::v-deep.el-table {
  .el-table__expand-icon {
    display: none;
  }
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
